<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
	</head>
	<body>

		<!--
		   -JavaScript 计时事件
		   -    setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
		   -    setTimeout() - 在指定的毫秒数后执行指定代码
		   -->
		<!--setInterval() 方法-->
		<p>单击按钮每3秒出现一个“Hello”警告框。</p>
		<p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
		<button onclick="myFunction1()">点我</button>
		<script>
			function myFunction1(){
				setInterval(function(){alert("Hello")}, 3000);
			}
		</script>

		<!--动态显示当前时间-->
		<p>在页面显示一个时钟</p>
		<p id="demo1"></p>
		<script>
			var myVar=setInterval(function(){myTimer()}, 1000);
			function myTimer(){
				var d=new Date();
				var t=d.toLocaleTimeString();
				document.getElementById("demo1").innerHTML=t;
			}
		</script>

		<!--clearInterval() 方法用于停止 setInterval() 方法执行的函数代码-->
		<button onclick="myStopFunction()">停止</button>
		<script>
			function myStopFunction(){
				clearInterval(myVar);
			}
		</script>

		<!--setTimeout() 方法-->
		<!--clearTimeout() 方法用于停止执行setTimeout()方法的函数代码-->
		<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
		<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
		<button onclick="myFunction2()">点我</button>
		<button onclick="myStopFunction2()">停止弹框</button>
		<script>
			var myVar2;
			function myFunction2(){
				myVar2=setTimeout(function(){alert("Hello")}, 3000);
			}
			function myStopFunction2(){
				clearTimeout(myVar);
			}
		</script>

	</body>
</html>
